<template>
    <div
        class="container MaterialMange MaterialMangeStatistics"
        style="width:99%;margin-top:-25px;"
    >
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <el-row>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">物料类别</div>
                            <el-select clearable filterable v-model="queryBox.materielType">
                                <el-option
                                    v-for="item in materiel_type_option"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <el-form-item label prop="customerNumber">
                                <el-input v-model="queryBox.code" placeholder="物料编码">
                                    <template slot="prepend">物料编码</template>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <el-form-item label prop="customerNumber">
                                <el-input v-model="queryBox.name" placeholder="物料名称">
                                    <template slot="prepend">物料名称</template>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">分类</div>
                            <el-form-item>
                                <el-select
                                    clearable
                                    filterable
                                    v-model="queryBox.platformType"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in bc_material_platform_type_options"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    >{{item.value}}</el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <el-form-item label prop="uploadUser">
                                <el-input v-model="queryBox.uploadUser" placeholder="上传人">
                                    <template slot="prepend">上传人</template>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">状态</div>
                            <el-form-item>
                                <el-select
                                    clearable
                                    filterable
                                    v-model="queryBox.useState"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in bc_materiel_use_state_options"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    >{{item.value}}</el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">文件类型</div>
                            <el-select clearable filterable v-model="queryBox.mediaType">
                                <el-option
                                    v-for="item in bcMediaTypeOption"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <!-- <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">停启</div>
              <el-form-item>
                <el-select clearable filterable v-model="queryBox.onlineState" placeholder="请选择">
                  <el-option
                    v-for="item in isopen"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
                    </el-col>-->
                    <!-- <el-col :span="9">
            <div class="depart-box" style="margin-bottom:20px;">
              <div class="slect-title" style="width:150px;">使用期限</div>
              <el-date-picker
                v-model="useDateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="depart-box" style="margin-bottom:20px;">
              <div class="slect-title" style="width:150px;">更新时间</div>
              <el-date-picker
                v-model="upDateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
                    </el-col>-->
                </el-row>
                <!-- <el-row>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">停启</div>
              <el-form-item>
                <el-select clearable filterable v-model="queryBox.onlineState" placeholder="请选择">
                  <el-option
                    v-for="item in isopen"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
                </el-row>-->
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="search"
                />
            </div>
        </div>
        <!-- 导出按钮 -->
        <div class="add-btns">
            <kt-button :label="$t('action.exportExcel')" perms="MarketingManage:MaterialMangeStatistics:exportExcel" type="primary" @click="exportFile" />
        </div>
        <!--表格内容栏-->
        <div class="btn">
            <Crm-table
                class="table-width"
                width="400"
                :showBatchDelete="false"
                :data="pageResult"
                :columns="columns"
                :loading="loading"
                @findPage="findPage"
                @handleCellClick='handleCellClick'
            ></Crm-table>
        </div>
        <el-dialog
            class="add-pop MaterialMangeStatisticsPop"
            title="用户列表"
            width="40%"
            @close="closePop"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
        >
            <el-table
                :data="fontUserList"
                style="width: 100%"
            >
                <el-table-column prop="userName" label="分中心编码" width="180"></el-table-column>
                <el-table-column prop="threePartName" label="分中心名称" width="180"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import WebUpload from "@/components/common/upload/WebUpload";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
    name: "MaterialMange",
    components: {
        PopupTreeInput,
        CrmTable,
        KtButton,
        CrmSwitch
    },
    data() {
        return {
            size: "small",
            // 查询条件
            isopen: [
                {
                    value: "启用",
                    key: "1"
                },
                {
                    value: "停用",
                    key: "2"
                }
            ],
            useDateTime: [],
            upDateTime: [],
            queryBox: {
                materialPlatformType: "",
                materielType: "",
                materielState: "",
                useState: "",
                onlineState: "",
                code: "",
                name: "",
                platformType: "",
                uploadUser: "",
                state: ""
            },
            dataFormAdd: {
                useDate: [],
                materielType: "",
                platformType: "",
                code: "",
                name: ""
            },
            width: 200,
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "materielTypeStr", label: "物料类别", minWidth: 100 },
                { prop: "code", label: "物料编码", minWidth: 150 },
                { prop: "name", label: "物料名称", minWidth: 150 },
                {
                    prop: "clickNum",
                    label: "点击次数",
                    sortable: "sortable",
                    minWidth: 100,
                    formatter: (row, col) => {
                        if (row.clickNum >0) {
                            return (
                                <div class="ToppingDiv">
                                    <a>{row.clickNum}</a>
                                </div>
                            );
                        } else {
                            return <div>{row.clickNum}</div>;
                        }
                    }
                },
                {
                    prop: "clickUpNum",
                    label: "点赞次数",
                    sortable: "sortable",
                    minWidth: 100,
                    formatter: (row, col) => {
                        if (row.clickUpNum >0) {
                            return (
                                <div class="ToppingDiv">
                                    <a>{row.clickUpNum}</a>
                                </div>
                            );
                        } else {
                            return <div>{row.clickUpNum}</div>;
                        }
                    }
                },
                {
                    prop: "downLoadNum",
                    label: "下载次数",
                    sortable: "sortable",
                    minWidth: 100,
                    formatter: (row, col) => {
                        if (row.downLoadNum >0) {
                            return (
                                <div class="ToppingDiv">
                                    <a>{row.downLoadNum}</a>
                                </div>
                            );
                        } else {
                            return <div>{row.downLoadNum}</div>;
                        }
                    }
                },
                { prop: "platformTypeStr", label: "分类", minWidth: 100 },
                { prop: "mediaTypeStr", label: "文件类型", minWidth: 100 },
                { prop: "updateTime", label: "更新时间", minWidth: 150 },
                { prop: "uploadUser", label: "上传人", minWidth: 100 },
                { prop: "useStateStr", label: "状态", minWidth: 100 }
            ],
            columns2: [{ type: "statisticsType", label: "下载", minWidth: 50 }],
            buryingConfigRule: {
                materielType: [
                    {
                        required: true,
                        message: "请填写物料类别",
                        trigger: "blur"
                    }
                ],
                platformType: [
                    { required: true, message: "请填写分类", trigger: "blur" }
                ],
                name: [
                    {
                        required: true,
                        message: "请填写物料名称",
                        trigger: "blur"
                    }
                ],
                code: [
                    {
                        required: true,
                        message: "请填写物料编码",
                        trigger: "blur"
                    }
                ]
                // useDate :[
                //   { required: true, message: '请选择使用期限', trigger: 'change' }
                // ],
            },
            pageRequest: { pageNum: 1, pageSize: 10 },
            pageResult: {
                content: []
            },
            useDate: [],
            operation: false, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            materiel_type_option: [],
            bc_material_platform_type_options: [],
            bc_materiel_use_state_options: [],
            loading: false, // 加载标识
            editLoading: false,
            userList: [],
            bcMediaTypeOption: [],
            fontUserList: []
        };
    },
    methods: {
        // 搜索
        search() {
            this.loading = true;
            this.pageRequest.pageNum = 1;
            if (this.upDateTime) {
                this.queryBox.updateTimeStart = this.upDateTime[0];
                this.queryBox.updateTimeEnd = this.upDateTime[1];
            }
            if (this.useDateTime) {
                this.queryBox.useStartTime = this.useDateTime[0];
                this.queryBox.useEndTime = this.useDateTime[1];
            }
            this.findPage(null);
        },
        get_downList() {
            // 物料类别
            this.materiel_type_option = JSON.parse(
                localStorage.getItem("materielTypeOption")
            );
            // 分类
            this.bc_material_platform_type_options = JSON.parse(
                localStorage.getItem("bcMaterialPlatformType")
            );
            // 状态
            this.bc_materiel_use_state_options = JSON.parse(
                localStorage.getItem("bcMaterielUseStateOptions")
            );
            this.$api.person.findPage({ userType: 3 }).then(res => {
                if (res.result == 1) {
                    this.userList = res.userInfoList;
                } else {
                    this.$message.error(res.msg);
                }
            }),
                // 文件类型
                this.$api.user
                    .optionsList({ codeType: "bc_media_type" })
                    .then(res => {
                        this.bcMediaTypeOption = res.keyValueList;
                    });
        },
        handleChange(value) {},
        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }
            this.queryBox.pageSize = this.pageRequest.pageSize;
            this.queryBox.pageNum = this.pageRequest.pageNum;
            // this.queryBox.manageType = 1
            this.$api.agent.mediaTypeStatisticsList(this.queryBox).then(res => {
                if (res.result == 1) {
                    this.loading = false;
                    let content = { content: res.data, totalSize: res.total };
                    this.pageResult = content;
                    this.pageResult.content.forEach(item => {
                        this.materiel_type_option.forEach(mtItem => {
                            if (mtItem.key == item.materielType) {
                                item.materielTypeStr = mtItem.value;
                            }
                        });
                        item.useStartTimeStr = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                            item.useStartTime
                        );
                        item.useEndTimeStr = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                            item.useEndTime
                        );
                        item.state == 1
                            ? (item.stateStr = "启用")
                            : (item.stateStr = "停用");
                        item.useTimeStr =
                            item.useStartTimeStr + "--" + item.useEndTimeStr;
                        this.bc_material_platform_type_options.forEach(
                            pItem => {
                                if (pItem.key == item.platformType) {
                                    item.platformTypeStr = pItem.value;
                                }
                            }
                        );
                        this.bc_materiel_use_state_options.forEach(bcusItem => {
                            if (bcusItem.key == item.useState) {
                                item.useStateStr = bcusItem.value;
                            }
                        });

                        this.bcMediaTypeOption.forEach(bcusItem => {
                            if (item.mediaType) {
                                if (bcusItem.key == item.mediaType) {
                                    item.mediaTypeStr = bcusItem.value;
                                }
                            }
                        });
                    });
                }
            });
        },
        materielTypeChange(val) {
            this.$api.agent
                .materielFileManagecodeCreate({ type: val })
                .then(res => {
                    if (res.errorCode == 0) {
                        this.dataFormAdd.code = res.msg;
                    }
                });
        },
        // 重置
        reset(queryBox) {
            this.$refs.queryBox.resetFields();
            this.queryBox.materielType = "";
            this.queryBox.code = "";
            this.queryBox.name = "";
            this.queryBox.platformType = "";
            this.queryBox.uploadUser = "";
            this.queryBox.useState = "";
            this.useDateTime = "";
            this.queryBox.useStartTime = "";
            this.queryBox.useEndTime = "";
            this.upDateTime = "";
            this.queryBox.updateTimeEnd = "";
            this.queryBox.useEndTime = "";
            this.queryBox.updateTimeStart = "";
            this.queryBox.mediaType = "";
            this.queryBox.upateTimeEnd = "";
            this.queryBox.onlineState = "";
            this.findPage(null);
        },
        newAdd() {
            this.dialogVisible = true;
            this.operation = true;
        },
        closePop() {
            this.dialogVisible = false;
            this.operation = false;
            this.dataFormAdd.code = "";
            this.dataFormAdd.materielType = "";
            this.dataFormAdd.platformType = "";
            this.dataFormAdd.name = "";
            this.dataFormAdd.useDate = "";
            this.dataFormAdd.useStartTime = "";
            this.dataFormAdd.useEndTime = "";
        },
        handleCellClick(index, row) {
            var mediaTypeId=index.index.mediaTypeId
            if (index.row.property == "clickNum") {
                if(index.index.clickNum>0){
                    this.dialogVisible = true;
                }

                var statisticsType=1 //1：浏览，2：下载，3：点赞
                this.queryUserlist(mediaTypeId,statisticsType)
            }
            if (index.row.property == "downLoadNum") {
                if(index.index.downLoadNum>0){
                    this.dialogVisible = true;
                }
               var statisticsType=2 //1：浏览，2：下载，3：点赞
                this.queryUserlist(mediaTypeId,statisticsType)
            }
            if (index.row.property == "clickUpNum") {
                if(index.index.clickUpNum>0){
                    this.dialogVisible = true;
                }
                var statisticsType=3 //1：浏览，2：下载，3：点赞
                this.queryUserlist(mediaTypeId,statisticsType)
            }
            
            
        },
        queryUserlist(mediaTypeId,statisticsType){
            this.$api.agent
                .queryMediaTypeStatisticsFrontUserList({
                    mediaTypeId: mediaTypeId,
                    statisticsType: statisticsType //1：浏览，2：下载，3：点赞
                })
                .then(res => {
                    this.fontUserList = res.data;
                    if (res.result == 2) {
                        // this.$message({ message: res.msg, type: 'error' });
                    } else {
                        // this.$message({ message: res.msg, type: 'success' });
                    }
                });
        },
        // 导出
            exportFile(){
            axios({
                method:'get',
                url:baseUrl+'/mediaTypeStatistics/exportMediaTypeStatisticsList',
                params:this.queryBox
            }).then(res=>{
                window.open(res.request.responseURL)
            })
            },
    },
    mounted() {
        this.get_downList();
    }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scoped>
.MaterialMange {
    .depart-box {
        .el-form-item {
            width: 100%;
        }
    }
}
.checked-person {
    font-weight: 500;
    display: inline-block;
    text-align: center;
    margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    color: #303133;
}
.demo-form-inline {
    width: 90%;
    margin: 0 auto;
    .el-dialog__body .el-input {
        width: 93% !important;
    }
    .el-select {
        width: 100% !important;
    }
    .tit {
        display: inline-block;
        margin-top: 10%;
    }
}
.el-row .el-col {
    margin-left: 0;
}
.query-box .el-row .el-col {
    margin-left: 2%;
}
.el-dialog__wrapper .el-form-item__content {
    margin-left: 0;
}
.ToppingDiv {
    a {
        text-decoration: none;
        cursor: pointer;
        color: blue;
    }
}
</style>
<style lang='scss'>
.batchdistribution-pop .el-dialog__header {
    padding: 0 0 0 0 !important;
}
.add-MaterialMangePop {
    .el-range-editor.el-input__inner {
        width: 100%;
    }
}
.MaterialMange {
    .btn {
        .el-button + .el-button {
            width: 20px;
        }
    }
}
.MaterialMangeStatistics {
    .el-table th,
    .el-table tr {
        height: 35px;
    }
}
.MaterialMangeStatisticsPop{
    .el-table{
        width:100% !important
    }
    .el-table__header,.el-table__body{
        width:100% !important
    }
    .el-table td.gutter, .el-table th.gutter{
        display: block !important
    }
}
</style>



